<template>
    <div :class="['side',visible?'show':'']">
        <div class="side_title">
            <div class="side_title_l">{{dialogStatus}}</div>
            <div class="side_title_r">
                <el-button @click="visible = false">
                    取消
                </el-button>
            </div>
        </div>
        <div class="side_content">
            <div class="side_t">
                <el-table :key="tableKey" v-loading="listLoading" row-key="menuId" height="100%" :data="list" border fit
                    highlight-current-row style="width: 100%;">
                    <el-table-column prop="customerName" header-align="center" align="center" label="客户姓名" />
                    <el-table-column prop="type" header-align="center" align="center" label="类型">
                        <template slot-scope="scope">{{ scope.row.type | customerTypeFilter }}</template>
                    </el-table-column>
                    <el-table-column prop="mobile" header-align="center" align="center" label="手机号" />
                    <el-table-column prop="idcard" header-align="center" align="center" label="身份证/纳税人识别号">
                        <template slot-scope="scope">{{ scope.row.type == '1' ? scope.row.idcard : scope.row.taxNumber}}</template>
                    </el-table-column>
                    <!-- <el-table-column prop="taxNumber" header-align="center" align="center" label="身份证/纳税人识别号" /> -->
                    <el-table-column prop="houseAmounts" header-align="center" align="center" label="房屋数量" />
                    <!-- <el-table-column prop="updateTime" header-align="center" align="center" width="180" label="最后编辑时间">
                        <template slot-scope="scope">{{ scope.row.updateTime | toData }}</template>
                    </el-table-column>
                    <el-table-column prop="updateUserName" header-align="center" align="center" label="编辑人" /> -->
                    <el-table-column header-align="center" align="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="unbindCustomer(scope.row)">
                                取消绑定
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="side_c">
                <div class="side_c_l">
                    绑定客户信息
                </div>
                <div class="side_c_r">
                    <el-form ref="filtrateForm" :inline="true" :model="filtrateForm" label-width="80px">
                        <el-form-item label="姓名/手机:" prop="customInfo">
                            <el-input v-model.trim="filtrateForm.customInfo" placeholder="请输入姓名/手机" style="width:160px;" clearable />
                        </el-form-item>

                        <el-form-item label="客户类型:" prop="customerType">
                            <el-select v-model="filtrateForm.customerType" placeholder="请选择">
                                <el-option v-for="item in customer_type_option" :label="item.lable" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="filter-item" @click="handleFilter">
                                查询
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="side_b">
                <el-table :key="tableKey1" v-loading="listLoading1" row-key="menuId" height="100%" :data="list1" border fit
                    highlight-current-row style="width: 100%;">

                    <el-table-column prop="customerName" header-align="center" align="center" label="客户姓名" />
                    <el-table-column prop="type" header-align="center" align="center" label="类型">
                        <template slot-scope="scope">{{ scope.row.type | customerTypeFilter }}</template>
                    </el-table-column>
                    <el-table-column prop="mobile" header-align="center" align="center" label="手机号" />
                    <el-table-column prop="idcard" header-align="center" align="center" label="身份证/纳税人识别号">
                        <template slot-scope="scope">{{ scope.row.type == '1' ? scope.row.idcard : scope.row.taxNumber}}</template>
                    </el-table-column>
                    <!-- <el-table-column prop="taxNumber" header-align="center" align="center" label="身份证/纳税人识别号" /> -->
                    <el-table-column prop="houseAmounts" header-align="center" align="center" label="房屋数量" />
                    <!-- <el-table-column prop="updateTime" header-align="center" align="center" width="180" label="最后编辑时间">
                        <template slot-scope="scope">{{ scope.row.updateTime | toData }}</template>
                    </el-table-column>
                    <el-table-column prop="updateUserName" header-align="center" align="center" label="编辑人" /> -->
                    <el-table-column header-align="center" align="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="scope.row.isbind==1" type="text" size="small" @click="bindCustomer(scope.row)">
                                绑定客户
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination :total="total" :page.sync="listQuery1.page" :limit.sync="listQuery1.limit" @pagination="getCustomerList" />
        </div>
        <div :class="['side_zz',visible?'show':'']"></div>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 分页组件
import { getCustomerList, findHouseCustomers, bindCustomer, unbindCustomer } from '@/api/assets'// 请求数据
import { customerType, customerState } from '@/utils/enum'
import { toDate } from '@/utils'
export default {
    components: { Pagination },
    filters: {
        toData (data) {
            return toDate(data)
        },
        customerTypeFilter (e) {
            let map = customerType;
            return map[e]
        },
        customerStateFilter (e) {
            let map = customerState;
            return map[e]
        }
    },
    computed: {
        customer_type_option () {
            let arr = [{ lable: '全部', value: '' }]
            for (let key in customerType) {
                arr.push({
                    lable: customerType[key],
                    value: key
                })
            }
            return arr
        },
        customer_state_option () {
            let arr = [{ lable: '全部', value: '' }]
            for (let key in customerState) {
                arr.push({
                    lable: customerState[key],
                    value: key
                })
            }
            return arr
        }
    },
    data () {
        return {
            filtrateForm: { customerType: "", customInfo: "" },
            currentRow1: {},
            dialogStatus: '客户信息管理',
            visible: false,
            tableKey: 0,
            list: [], // 表格数据
            total: 0, // 总条数
            listLoading: false, // 表格加载数据时的 loading
            listQuery: { // 表格当前页 和 当前页的展示数量
                page: 1,
                limit: 20
            },
            tableKey1: 0,
            list1: [], // 表格数据
            total1: 0, // 总条数
            listLoading1: false, // 表格加载数据时的 loading
            listQuery1: { // 表格当前页 和 当前页的展示数量
                page: 1,
                limit: 10
            },
        }
    },
    created () {

    },
    methods: {
        // 初始化
        init (status, param) {
            console.log(param)
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this.houseId = param.id
            this.getList()
        },
        getList () {
            this.findHouseCustomers({ houseId: this.houseId }).then(() => {
                this.getCustomerList()
            })
        },
        create (param) {

        },
        handleFilter () {
            this.listQuery1.page = 1
            this.getCustomerList()
        },
        async getCustomerList () {
            const params = Object.assign(this.filtrateForm, this.listQuery)
            const res = await getCustomerList(params).catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            console.log(">>>>>", data)
            data.list.forEach((item) => {
                this.list.forEach(val => {
                    if (item.id == val.id) {
                        // 不可再绑定
                        item.isbind = 1
                    }
                })
            })
            console.log(data.list)
            this.list1 = data.list
            this.total1 = data.totalCount
            this.listLoading = false
        },
        async findHouseCustomers (params) {
            const res = await findHouseCustomers(params).catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            console.log(data)

            this.list = data ? data : []

        },
        // 表单提交
        async bindCustomer (row) {

            let visible = await this.$confirm(`确定对${row.customerName}进行[绑定]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            const res = await bindCustomer({ houseId: this.houseId, customerId: row.id })

            // 成功
            this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                    this.getList()
                }
            })

        },
        async unbindCustomer (row) {

            let visible = await this.$confirm(`确定对${row.customerName}进行[解绑]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })

            const res = await unbindCustomer({ houseId: this.houseId, customerId: row.id })
            // 成功
            this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                    this.getList()
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
.side_zz {
    position: fixed;
    width: 0;
    height: 100%;
    z-index: -10;
    top: 0;
    bottom: 0;
    right: 800px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.1s linear;
    opacity: 0;
}
.side_zz.show {
    width: calc(100% - 800px);
    opacity: 1;
}
.side {
    position: fixed;
    right: -900px;
    top: 0;
    z-index: 10;
    width: 800px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s linear;
    padding: 10px;
    box-sizing: border-box;
}
.side.show {
    right: 0;
}
.side_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
}
.side_content {
    width: 100%;
    height: calc(100% - 40px);
    padding: 10px 0;
    box-sizing: border-box;
}
.side_t {
    width: 100%;
    height: calc(40% - 100px);
}
.side_c {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    flex-flow: row;
    align-items: center;
    padding-top: 40px;
    box-sizing: border-box;
}
.side_c_l {
    flex: 0 0 120px;
    height: 30px;
    line-height: 30px;
}
.side_c_r {
    flex: 1;
    height: 30px;
    text-align: right;
}
.side_b {
    width: 100%;
    height: calc(60% - 60px);
}
.side_title {
    display: flex;
    justify-content: center;
    flex-flow: row;
}
.side_title_l {
    flex: 0 0 160px;
}
.side_title_r {
    flex: 1;
    text-align: right;
}
</style>